import React, { useEffect, useState } from 'react'
import { UserOutlined, DownOutlined } from '@ant-design/icons';
import { Dropdown, Menu, Space, Avatar } from 'antd';
import Actives from "../assict/images/头像.png"
import "./header.less"
import { useLocation, history } from 'umi';
export default function Header(props: any) {
    let [isLogin, setIsLogin] = useState("")
    const menu = (
        <Menu
            items={[
                {
                    label: (
                        <div onClick={() => { history.push("/login") }}>
                            退出登录
                        </div>
                    ),
                    key: '1',
                },
                {
                    label: (
                        <div onClick={() => { }}>
                            修改密码
                        </div>
                    ),
                    key: '2',
                },
            ]}
        />
    );
    let locatio: any = useLocation()
    let { query: { title } } = locatio
    useEffect(() => {
        let login = JSON.parse(window.localStorage.getItem("isLogin"))
        setIsLogin(login)
    }, [])
    return (
        <div>
            <div>
                {/* 页头 */}
                <div className='header'>
                    <div><h1>活动助手</h1></div>
                    <div style={{ width: "300px" }}>
                        <div style={{ display: "flex", width: "80%" }}>
                            <div>
                                <Avatar src={Actives} icon={<UserOutlined />} />
                                <span style={{ marginLeft: "20px", marginRight: "20px" }}>{isLogin.userAccount}</span>
                                <Dropdown overlay={menu} trigger={['click']}>
                                    <a onClick={e => e.preventDefault()}>
                                        <Space>
                                            <DownOutlined />
                                        </Space>
                                    </a>
                                </Dropdown>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={{ padding: "0px 30px", height: '40px', lineHeight: '40px' }}>
                    <span>创建活动</span> / <span style={{ fontSize: "16px", fontWeight: "bold" }}>{title ? title : "创建活动"}</span>
                </div>
                {/* 表格 */}
                <div style={{ width: "98%", margin: "auto", borderRadius: "6px", }}>
                    <div style={{ marginTop: '-20px' }}>
                        {/* 创建表格 */}
                        {props.children}
                    </div>
                </div>
            </div>
        </div>
    )
}
